<template>
    <div>
        <s-search-bar>
            <el-form :model="carOwner" label-width="80px">
                <el-form-item prop="orgId" label="小区" v-hasOrg>
                    <org-select v-model="carOwner.orgId" @select="query"></org-select>
                </el-form-item>
                <el-form-item prop="ownerName" label="车主名">
                    <el-input v-model="carOwner.ownerName"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="车牌号">
                    <el-input v-model="carOwner.plateNumber"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addCarOwner" type="success">新增</el-button>
                    <el-button @click="query" icon="el-icon-search" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </s-search-bar>

        <basic-table :tableLoading="tableLoading" :tableData="tableData" :tableOption="tableOption" :tablePage="tablePage" @table-search="query">
            <template slot="scope" slot-scope="scope">
                <el-button type="text" icon="el-icon-view" v-if="scope.scope.row.photoId" @click="seePhoto(scope.scope.row,scope.scope.$index)">查看</el-button>
            </template>
            <template slot="operation" slot-scope="scope">
                <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.scope.row,scope.scope.$index)">修改</el-button>
                <el-button type="text" icon="el-icon-delete" @click="rowDel(scope.scope.row,scope.scope.$index)">删除</el-button>
                <el-button type="text" icon="el-icon-edit" @click="bandRfid(scope.scope.row,scope.scope.$index)">绑定标签</el-button>
            </template>
        </basic-table>
        <add-car-owner ref="add-car-owner" @table-search="query"></add-car-owner>
        <photo-view ref="photo-view"></photo-view>

        <el-dialog title="绑定标签" :visible="rfidShowDialog" :before-close="handleClose" width="500px">
            <el-form ref="rfidInfo" :model="rfidInfo" label-width="100px">
                <el-form-item prop="rfidCardNo" label="标签卡号:">
                    <el-input v-model="rfidInfo.rfidCardNo" clearable></el-input>
                    <div style="font-size:12px;color:#000">备注：标签卡号一车一码，用于车辆识别身份标识</div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rfidShowDialog = false">取 消</el-button>
                <el-button type="primary" @click="confirmRfidCardNo">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
//电动车管理
import AddCarOwner from './add.vue'
import PhotoView from './photo.vue'
import { tableOption } from '@/const/crud/business/car'
import * as API from '@/api/business/car'
export default {
    components: { AddCarOwner,PhotoView },
    data() {
        return {
            tableData: [],
            tableOption: tableOption,
            tableLoading: false,
            tablePage: {
                size: 50,
                current: 1,
                total: 0
            },
            carOwner: {
                ownerName: '',
                plateNumber: '',
                orgId: this.$store.state.data.globalOrg.id
            },
            rfidInfo:{
                carId:'',
                rfidCardNo:''
            },
            selectRow: '',
            rfidShowDialog:false
        }
    },
    methods: {
        addCarOwner() {
            this.$refs['add-car-owner'].show()
        },
        seePhoto(row){
            this.$refs['photo-view'].show(row.photoId)
        },
        query() {
            this.tableLoading = true
            API.page(Object.assign(this.tablePage,this.carOwner)).then(res => {
                this.tableLoading = false
                if (res.data.code === 0) {
                     res.data.data.records.forEach(item=>{
                        item.orgId = Number.parseInt(item.orgId)
                    })
                    this.tableData = res.data.data.records
                    this.tablePage.total = Number.parseInt(res.data.data.total)
                }
            })
        },
        handleEdit(row, index) {
            this.$refs['add-car-owner'].edit(row)
        },
        rowDel(row, index) {
            this.$confirm('是否删除当前车辆数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                API.deleteById(row.carId).then(res => {
                    if(res.data.code === 0){
                        this.$message.success('删除成功')
                        this.query()
                    }
                })
            })
        },
        bandRfid(row){
            this.rfidInfo.carId = row.carId
            this.rfidInfo.rfidCardNo = row.rfidCardNo
            this.rfidShowDialog = true
        },
        confirmRfidCardNo(){
            this.$refs['rfidInfo'].validate(valid=>{
                if(valid){
                    API.bindRfidCardNo(this.rfidInfo).then(res=>{
                        if(res.data.code === 0){
                            this.$message.success('卡号绑定成功')
                            this.query()
                            this.handleClose()
                        }
                    })
                }
            })
        },
        handleClose(done) {
            this.rfidShowDialog = false
        }
    },
    mounted() {
        this.query()
    }
}
</script>
